<template>
  <div class="container">
    <div class="query-form">
      <el-form ref="formRef" :model="queryForm" :rules="rules" inline>
        <el-form-item>
          <el-button type="primary" @click="handleExportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="costSplit" border>
      <el-table-column label="店铺" prop="store"/>
      <el-table-column align="center" label="当月薪金">
        <el-table-column label="基本薪金" prop="basicPayment"/>
      </el-table-column>
      <el-table-column label="勤工" prop="work"/>
      <el-table-column label="上月店铺达标奖金" prop="lastMonthStoreAchievementBonus"/>
      <el-table-column label="新店设场津贴" prop="newStoreEstablishmentSubsidy"/>
      <el-table-column label="港岛/将军澳区津贴" prop="hongKongIslandTseungKwanOAreaSubsidy"/>
      <el-table-column label="新人奖金带教奖金" prop="newcomerBonusAndTrainingBonus"/>
      <el-table-column label="全薪疾病津贴" prop="fullPaySicknessBenefit"/>
      <el-table-column label="五分之四疾病津贴" prop="fourFifthsSicknessBenefit"/>
      <el-table-column align="center" label="补薪">
        <el-table-column label="补偿薪资总数" prop="totalCompensationSalary"/>
        <el-table-column label="其他补偿薪资" prop="otherCompensationSalary"/>
      </el-table-column>
      <el-table-column label="SH补偿" prop="SHCompensation"/>
      <el-table-column label="假日补偿" prop="holidayCompensation"/>
      <el-table-column align="center" label="扣减">
        <el-table-column label="扣减总数" prop="totalDeduction"/>
      </el-table-column>
      <el-table-column label="合计" prop="total"/>
      <el-table-column align="center" label="9月">
        <el-table-column label="强基金供款（雇员）" prop="employeeMPFContributions.value"/>
      </el-table-column>
      <el-table-column align="center" label="7月">
        <el-table-column label="强基金供款（雇主）" prop="employerMPFContributions[0].value"/>
      </el-table-column>
      <el-table-column align="center" label="8月">
        <el-table-column label="强基金供款（雇主）" prop="employerMPFContributions[1].value"/>
      </el-table-column>
      <el-table-column align="center" label="9月">
        <el-table-column label="强基金供款（雇主）" prop="employerMPFContributions[2].value"/>
      </el-table-column>
      <el-table-column label="本月薪资" prop="thisMonthSalary"/>
      <el-table-column label="入账总金额" prop="totalAmountDeposited"/>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {utils, writeFile} from "xlsx";

const isLoading = ref(false)
const queryForm = ref()
const formRef = ref<InstanceType<typeof ElForm>>()
const rules: FormRules = {}

interface CostSplitResponse {
  store?: string
  basicPayment?: number
  work?: number // 勤工
  lastMonthStoreAchievementBonus?: number
  newStoreEstablishmentSubsidy?: number
  hongKongIslandTseungKwanOAreaSubsidy?: number // 港岛/将军澳区津贴
  newcomerBonusAndTrainingBonus: number
  fullPaySicknessBenefit?: number
  fourFifthsSicknessBenefit?: number
  totalCompensationSalary?: number
  otherCompensationSalary?: number
  SHCompensation?: number
  holidayCompensation?: number
  totalDeduction?: number
  total?: number
  employeeMPFContributions?: { // 强基金供款（雇员）
    month: number,
    value: number
  }
  employerMPFContributions?: { // 强基金供款（雇主）
    month: number,
    value: number
  }[]
  thisMonthSalary?: number
  totalAmountDeposited?: number
}

const costSplit = ref<CostSplitResponse[]>([])

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  setInterval(() => {
    costSplit.value = [{
      store: "上水彩園",
      basicPayment: 38216.6,
      work: 2966.47,
      lastMonthStoreAchievementBonus: 500.0,
      newStoreEstablishmentSubsidy: 0.0,
      hongKongIslandTseungKwanOAreaSubsidy: 0.0,
      newcomerBonusAndTrainingBonus: 0.0,
      fullPaySicknessBenefit: 0.0,
      fourFifthsSicknessBenefit: 0.0,
      totalCompensationSalary: 100.0,
      otherCompensationSalary: 100.0,
      SHCompensation: 0.0,
      holidayCompensation: 0.0,
      totalDeduction: 0.0,
      total: 41783.07,
      employeeMPFContributions: {
        month: 9,
        value: 725.0
      },
      employerMPFContributions: [
        {
          month: 7,
          value: 0.0
        },
        {
          month: 8,
          value: 0.0
        },
        {
          month: 9,
          value: 725.0
        },
      ],
      thisMonthSalary: 41058.07,
      totalAmountDeposited: 41058.07
    }]
    isLoading.value = false
  }, 1000)
}

getData()

function handleExportClick() {
  if (costSplit.value.length > 0) {
    const processedData: {
      "店铺"?: string
      "基本薪金"?: number
      "勤工"?: number
      "上月店铺达标奖金"?: number
      "新店设场津贴"?: number
      "港岛/将军澳区津贴"?: number
      "新人奖金带教奖金": number
      "全薪疾病津贴"?: number
      "五分之四疾病津贴"?: number
      "补偿薪资总数"?: number
      "其他补偿薪资"?: number
      "SH补偿"?: number
      "假日补偿"?: number
      "扣减总数"?: number
      "合计"?: number
      "9月强基金供款（雇员）"?: number
      "7月强基金供款（雇主）"?: number
      "8月强基金供款（雇主）"?: number
      "9月强基金供款（雇主）"?: number
      "本月薪资"?: number
      "入账总金额"?: number
    }[] = costSplit.value.map((costSplit: CostSplitResponse) => ({
      "店铺": costSplit.store,
      "基本薪金": costSplit.basicPayment,
      "勤工": costSplit.work,
      "上月店铺达标奖金": costSplit.lastMonthStoreAchievementBonus,
      "新店设场津贴": costSplit.newStoreEstablishmentSubsidy,
      "港岛/将军澳区津贴": costSplit.hongKongIslandTseungKwanOAreaSubsidy,
      "新人奖金带教奖金": costSplit.newcomerBonusAndTrainingBonus,
      "全薪疾病津贴": costSplit.fullPaySicknessBenefit,
      "五分之四疾病津贴": costSplit.fourFifthsSicknessBenefit,
      "补偿薪资总数": costSplit.totalCompensationSalary,
      "其他补偿薪资": costSplit.otherCompensationSalary,
      "SH补偿": costSplit.SHCompensation,
      "假日补偿": costSplit.holidayCompensation,
      "扣减总数": costSplit.totalDeduction,
      "合计": costSplit.total,
      "9月强基金供款（雇员）": costSplit.employeeMPFContributions?.value,
      "7月强基金供款（雇主）": costSplit.employerMPFContributions?.[0].value,
      "8月强基金供款（雇主）": costSplit.employerMPFContributions?.[1].value,
      "9月强基金供款（雇主）": costSplit.employerMPFContributions?.[2].value,
      "本月薪资": costSplit.thisMonthSalary,
      "入账总金额": costSplit.totalAmountDeposited
    }))
    const workBook = utils.book_new()
    const workSheet = utils.json_to_sheet(processedData, {
      header: [
        "店铺",
        "基本薪金",
        "勤工",
        "上月店铺达标奖金",
        "新店设场津贴",
        "港岛/将军澳区津贴",
        "新人奖金带教奖金",
        "全薪疾病津贴",
        "五分之四疾病津贴",
        "补偿薪资总数",
        "其他补偿薪资",
        "SH补偿",
        "假日补偿",
        "扣减总数",
        "合计",
        "9月强基金供款（雇员）",
        "7月强基金供款（雇主）",
        "8月强基金供款（雇主）",
        "9月强基金供款（雇主）",
        "本月薪资",
        "入账总金额"
      ]
    })
    utils.book_append_sheet(workBook, workSheet)
    writeFile(workBook, "output.xlsx")
  } else {
    ElMessage.error("没有数据可以导出")
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
</style>
